<template>
  <div class="inbo">
    <el-form-item :label="bt" v-show="upload.uploadVisible">
      <el-upload ref="upload" :limit="jgfj" action="" class="xiaode" :class="{ 'xiaode2': jgfj > 1 }"
        :auto-upload="false" drag :file-list="upload.uploadFiles" name="upfile_fj" :on-change="handleUploadChange"
        :on-remove="handleUploadRemove" :before-remove="handleUploadBeforeRemove">
        <i class="el-icon-upload" />
        <div class="el-upload__text">{{ '最多上传' + jgfj + '个附件' }}</div>
      </el-upload>
    </el-form-item>
  </div>
</template>

<script>
import { uploadFile } from '@/api/syfxxtApi/khfw/FuncTest/api.js'
export default {
  data() {
    return {
      upload: {  //上传配置
        uploadVisible: true, //上传项是否显示，在查看时不显示
        uploadFiles: [], //已上传文件列表
      },

    }
  },
  props: {
    bt: {
      type: String,
      default: "附件"
    },
    jgfj: {
      type: [Number],
      default: 1
    },
    xgsj: {
      type: Object,
      default: () => ({ start: 0, limit: 100, sel_tzggid: formData.id })
    },
    url: {
      type: String,
      default: 'zxrcsw/tzgg'
    }
  },
  watch: {
    xgsj: {
      handler(val) {
        console.log("xgsj", val);
        if (val) {
          if (this.jgfj > 1) {
            this.doViewFJ(this.xgsj, this.url)
          }
          if (this.jgfj === 1) {
            this.doView(this.xgsj, this.url)
          }
        }
      }
    },
  },
  mounted() {
  },
  computed: {

  },
  methods: {
    doViewFJ(param, elr) {
      this.$getListData_fj(param, elr).then((res) => {
        if (res.success) {
          this.upload.uploadFiles = res.rows;
        }
      });
    },
    doView(param, elr) {
      this.$getListData(param, elr).then((res) => {
        if (res.success) {
          this.upload.uploadFiles = res.rows;
        }
      });
    },

    //上传文件改变事件
    handleUploadChange(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.upload.uploadFiles = filelist;
          this.$emit('fun', filelist)
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles = filelist;
          this.$emit('fun', filelist)
        }
      })
        .catch(() => {
          this.$message.error({ content: '上传失败!', placement: 'center' });
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles = filelist;
          this.$emit('fun', filelist)
        });
    },
    //上传文件删除事件
    handleUploadRemove(file, filelist) {
      this.upload.uploadFiles = filelist;
      this.$emit('fun', filelist)
      if (file.fileid && file.fjid) {
        submit_delfile_fj({ fileid: file.fileid, fjid: file.fjid, zscqid: file.zscqid })
          .then((res) => {
            if (res.success) {
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
          })
          .catch(() => {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      }
    },
    //上传文件删除前事件
    handleUploadBeforeRemove(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },

  }
};
</script>

<style scoped>
.inbo {
  display: inline-block;
}

.xiaode {
  width: 233px;
  height: 180px;
}

.xiaode2 {
  width: 500px;
  height: 100px;
}

.pagination-container {
  /* background: #fff; */
  padding: 23px 0 20px;
}

.pagination-container.hidden {
  display: none;
}
</style>